<template>
  <div class="tag">
    <div class="head">
      <el-table
        v-loading = "isLoading"
        :data="orderList"
        style="width: 100%">
        <el-table-column
          type="expand"
        >
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="订单创建时间">
                <span>{{ scope.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="用户openid">
                <span>{{scope.row.userOpenid}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          align="center"
          prop="amount"
        >
        </el-table-column>
        <el-table-column
          label="姊曰币"
          align="center"
          prop="ziyueCoin"
        >
        </el-table-column>
        <el-table-column
          label="订单状态"
          align="center"
          prop="status"
        >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.status === 0 ? 'danger' :scope.row.status === 1 ? 'warning':scope.row.status === 2 ? 'success' : 'primary'">
              {{scope.row.status === 0 ? '待支付' :scope.row.status === 1 ? '已取消':scope.row.status === 2 ? '已支付' : '错误信息'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="订单类型"
          align="center"
          prop="orderType"
        >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.orderType === '0' ? 'primary': 'success'">
              {{scope.row.orderType === '0' ? '充值订单':'消费订单'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="note"
        >
          <template slot-scope="scope">
            {{scope.row.note === null ? '暂无消息':scope.row.note}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.page"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getOrder} from "@/api/order";

export default {
  name: "order",
  // 首次进入
  async created() {
    await this.getOrderList()
  },
  data(){
    return {
      isLoading:true,
      // 页面
      data: {
        page: 1,
        size: 10
      },
      total:0,
      orderList:{},
    }
  },
  methods: {
    // 分页
    handleSizeChange(e){
      // 页面
      this.data.size = e
      this.getOrderList(this.data)
      console.log("数据条"+e)
    },
    handleCurrentChange(e){
      // 数据条
      this.data.page = e
      console.log("页面"+e)
      this.getOrderList(this.data)
    },
    // 页面数据
    async getOrderList() {
      this.isLoading = true
      const res = await getOrder(this.data)
      this.orderList = res.data.topOrders.records
      this.total = res.data.topOrders.total
      console.log(res)
      this.isLoading = false
    }
  }
}
</script>

<style scoped>
.demo-table-expand{
  display: flex;
  flex-direction: column;
}
.tag{
  padding: 10px;
  min-height: 100vh;
}
.head {
  justify-content: space-between;
  background-color: white;
  margin-top: 10px;
  padding: 30px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
</style>
